<template>
  <nav-bar>
    <template v-slot:default></template>
  </nav-bar>
  <div class="detailList">
    <img src="../../assets/images/check.png" />

    <p>支付成功</p>
  </div>
  <el-button type="success" @click="toFinal">查看我的存款</el-button>
  <el-button type="success" @click="toHome" plain>返回银行首页</el-button>
</template>

<script>
import { useRouter } from "vue-router";
import { reactive, toRefs } from "vue";
import NavBar from "../../components/common/navbar/NavBar.vue";
export default {
  components: {
    NavBar,
  },

  setup() {
    const router = useRouter();
    const state = reactive({
      cardNumber: "",
    });
    const toHome = () => {
      
        router.push("/home");
      
    };
    const toFinal = () => {
      
        router.push("/deposit");
      
    };
    return {
      ...toRefs(state),
      toHome,
      toFinal,
    };
  },
};
</script>
<style lang="scss" scoped>
.detailList {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5%;

  width: 90%;
  margin: 60px auto;
  // border: 1px solid #efefef;
  // background-color: #fff;
  // border-radius: 15px;
  // box-shadow: 0 0 8px #fff, 0 5px 13px rgb(0 0 0 / 7%);
}
img {
  width: 7%;
}
.detailList p {
  width: 100px;
  font-size: 20px;
}

.btn {
  width: 80%;
}
</style>
